<template>
	<view class="p-10">
		<view class="card">
			<u-cell-group>
				<u-cell :title="item.title" :value="options[item.prop]" v-for="(item, index) in data" :key="index"></u-cell>
			</u-cell-group>
			<view class="flex m-t-10">
				<u-button style="width: 200rpx; margin-right: 10rpx" type="primary" shape="circle" text="流转记录" @click="unref(stepspopup).open('bottom')"></u-button>
				<u-button style="width: 200rpx; margin-right: 10rpx" type="primary" shape="circle" text="流程图" @click="bpmnBtn"></u-button>
				<u-button style="width: 200rpx; margin-right: 10rpx" type="primary" shape="circle" text="取消申请" @click="stopProcess"></u-button>
				<u-button style="width: 200rpx" type="primary" shape="circle" text="删除申请" @click="unref(inputDialog).open()"></u-button>
			</view>
		</view>
	</view>

	<!-- 流程图 -->
	<uni-popup ref="canvaspopup" background-color="#fff">
		<div class="canvas" ref="canvas"></div>
	</uni-popup>
	<!-- 流转记录 -->
	<uni-popup ref="stepspopup" background-color="#fff">
		<u-steps :current="activities.length" direction="column" style="padding: 10px">
			<view v-for="(activity, index) in activities" :key="index" style="position: relative; padding-bottom: 40px; color: #909193; font-size: 12px">
				<u-steps-item :title="activity.taskName" :desc="activity.finishTime"></u-steps-item>
				<span style="position: absolute; left: 200px; top: 8px" v-if="activity.assigneeName">办理人 : {{ activity.assigneeName }} - {{ activity.deptName }}</span>
				<span style="position: absolute; left: 200px; top: 25px" v-if="activity.createTime">接收时间 : {{ activity.createTime }}</span>
				<span style="position: absolute; left: 26px; top: 42px" v-if="activity.duration">耗时 : {{ activity.duration }}</span>
				<span style="position: absolute; left: 26px; top: 59px" v-if="activity.comment?.type">意见类型 : {{ typeList[activity.comment?.type] }}</span>
				<span
					style="width: 350px; position: absolute; left: 26px; top: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
					v-if="activity.comment?.comment"
				>
					审批意见 : {{ activity.comment?.comment }}
				</span>
			</view>
		</u-steps>
	</uni-popup>

	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="删除申请" :value="comment" placeholder="请输入理由" @confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { nextTick, ref, unref } from 'vue';
import { getformData, getflowXmlAndNode, getflowRecord, getstopProcess, getprocessInstance } from '@/api/flowPath.js';

// import BpmnViewer from 'bpmn-js/lib/Viewer'
// import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'
// import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'

const canvaspopup = ref(),
	stepspopup = ref(),
	instanceId = ref(''),
	deployId = ref(''),
	currentXml = ref(''),
	sidList = ref([]),
	activities = ref([]),
	inputDialog = ref(),
	comment = ref(''),
	typeList = {
		1: '正常意见',
		2: '退回意见',
		3: '驳回意见',
		4: '委派意见',
		5: '转办意见',
		6: '终止流程'
	};

let bpmnModelerA = ref(null),
	canvas = ref(null);

let options = ref({}),
	data = ref([
		{
			title: '申请负责人',
			prop: 'applyDeptLeaderUserName'
		},
		{
			title: '申请部门',
			prop: 'applyDeptName'
		},
		{
			title: '申请时间',
			prop: 'applyDate'
		},
		{
			title: '开始时间',
			prop: 'startTime'
		},
		{
			title: '结束时间',
			prop: 'endTime'
		},
		{
			title: '作业风险地点',
			prop: 'locationName'
		},
		{
			title: '作业类型',
			prop: 'highRiskWorkTypeName'
		},
		{
			title: '作业标题',
			prop: 'highRiskWorkTitle'
		},
		{
			title: '作业部门',
			prop: 'workDeptName'
		},
		{
			title: '作业负责人',
			prop: 'siteLeaderUserName'
		},
		{
			title: '参与人员',
			prop: 'joinUserNames'
		},
		{
			title: '作业内容描述',
			prop: 'workInfo'
		},
		{
			title: '作业步骤描述',
			prop: 'workProcessInfo'
		},
		{
			title: '作业安全措施描述',
			prop: 'workControlInfo'
		}
	]);

onLoad((e) => {
	instanceId.value = JSON.parse(e.procInsId);
	deployId.value = JSON.parse(e.deployId);
	getformData({
		procInsId: JSON.parse(e.procInsId)
	}).then((res) => {
		res.data.joinUserNames = res.data.joinUserObjs.map((item) => item.joinUserName).join(',');
		options.value = res.data;
	});
	getflowRecord({
		procInsId: JSON.parse(e.procInsId)
	}).then((res) => {
		activities.value = res.data.flowList;
	});
});

// 绘制bpmn颜色
const getelementId = (arr) => {
	var elementRegistry = bpmnModelerA.get('elementRegistry');
	var element = elementRegistry._elements;

	nextTick(() => {
		let str = '';
		for (let key in element) {
			if (arr.indexOf(key) !== -1) {
				str = key;
				var gfx = elementRegistry.getGraphics(str);
				var path = gfx.querySelector('.djs-visual path');
				var circle = gfx.querySelector('.djs-visual circle');
				var rect = gfx.querySelector('.djs-visual rect');
				if (path !== null) {
					path.style.stroke = '#4eb819';
				}
				if (circle !== null) {
					circle.style.stroke = '#4eb819';
				}
				if (rect !== null) {
					path.style.stroke = '#1e1e1e';
					rect.style.stroke = '#409eff';
				}
			}
		}
	});
};

async function bpmnBtn() {
	unref(canvaspopup).open('bottom');

	await getflowXmlAndNode({
		procInsId: instanceId.value,
		deployId: deployId.value
	}).then((res) => {
		currentXml.value = res.data.xmlData;
		sidList.value = res.data.nodeData.map((item) => item.key);
	});
	bpmnModelerA = new BpmnViewer({
		additionalModules: [MoveCanvasModule, ZoomScrollModule],
		container: canvas.value
	});
	try {
		const result = bpmnModelerA.importXML(currentXml.value);
		getelementId(sidList.value);
	} catch (err) {
		console.log(err.message, err.warnings);
	}
}

const stopProcess = () => {
	uni.showModal({
		title: '提示',
		content: '确定取消申请',
		success: function (res) {
			if (res.confirm) {
				getstopProcess({
					instanceId: instanceId.value
				}).then((res) => {
					uni.showToast({
						icon: 'success',
						title: '申请取消成功'
					});
					uni.navigateBack({
						delta: 1 // 返回的页面数，如果是1则返回上一页
					});
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};

const dialogInputConfirm = () => {
	if (comment.value) {
		getprocessInstance({
			instanceId: instanceId.value,
			deleteReason: comment.value
		}).then((res) => {
			unref(inputDialog).close();
			comment.value = '';
			uni.showToast({
				icon: 'success',
				title: '申请删除成功'
			});
			uni.navigateBack({
				delta: 1 // 返回的页面数，如果是1则返回上一页
			});
		});
	} else {
		uni.showToast({
			icon: 'error',
			title: '理由不能为空'
		});
	}
};
</script>

<style lang="scss" scoped>
.canvas {
	height: 600rpx;
}

:deep(.u-cell__title) {
	width: 180rpx !important;
}
</style>